<template>


    <el-form label-width="120px" >

        <el-form-item label="商品名称" >
            <el-input v-model="product.name" />
        </el-form-item>

        <el-form-item label="商品型号" >
            <el-input v-model="product.model" />
        </el-form-item>
        <el-form-item label="商品分类" >
            <!-- <el-input v-model="product.category" /> -->
            <el-cascader
            v-model="product.category_ids"
                :options="categories"
                :props="{
                    label : 'name',
                    value : 'id',
                    // multiple: true,
                    checkStrictly: true,
                }"
                
                />
        </el-form-item>
        <el-form-item label="商品品牌" >
            
            <el-select v-model="product.brand_id" class="m-2" placeholder="选择品牌" >
                <el-option
                v-for="item in brand_list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                />
            </el-select>
        </el-form-item>

        <el-form-item label="商品状态" >
            <el-select v-model="product.status" placeholder="选择状态">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
        </el-form-item>

        <el-form-item label="商品描述" >

            <div style="border: 1px solid #ccc">
                <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editorRef"
                    :defaultConfig="toolbarConfig"
                    :mode="mode"
                />
                <Editor
                    style="height: 500px; overflow-y: hidden;"
                    v-model="product.description"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="handleCreated"
                />
            </div>
        </el-form-item>

    </el-form>




</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref, reactive, shallowRef } from 'vue';

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


const VITE_URL:any = window.VITE_URL;

interface Props {
    product:object
    // name: string
    // mode: string
    // brand: string
    // category: string
    // status: string|number
    // description: string
}

const {
    product,
    // name,
    // mode,
    // brand,
    // category,
    // status,
    // description,
}:any = defineProps<Props>()

const state:any = reactive({
  editorData: '',
  editorConfig: {
    language: 'zh-cn'
  },

})

const mode:any = 'default'
const editorRef:any = shallowRef()
const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
//     const allMenuKeys = editor.getAllMenuKeys()
//     console.log( allMenuKeys )
}

const categories:any = ref<[]>([]);
const getCategoryList = () => {

    const url:string = VITE_URL + '/admin.category/tree' ;
	axios.get( url ).then( ( res ) => {
        categories.value = res.data;
	} );

}
getCategoryList();

const brand_list:any = ref([]);
const get_brand_list = () => {

    const url:string = VITE_URL + '/admin.brand/index' ;
	axios.get( url ).then( ( res:any ) => {
        brand_list.value = res.data;
	} );

}
get_brand_list();

const token = localStorage.getItem('token');
const toolbarConfig: any = {}
const editorConfig: any = {
    placeholder: '请输入内容...',

    MENU_CONF: {
        uploadVideo: {
            server: VITE_URL + '/admin.FileUpload/wang_editor_upload',
            // form-data fieldName ，默认值 'wangeditor-uploaded-video'
            fieldName: 'file',

            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 5 * 1024 * 1024, // 5M

            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,

            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['video/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
                token: token,
                otherKey: ''
            },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            // headers: {
            //     Accept: 'text/x-json',
            //     otherKey: 'xxx'
            // },

            // 跨域是否传递 cookie ，默认为 false
            // withCredentials: true,

            // 超时时间，默认为 30 秒
            timeout: 15 * 1000, // 15 秒

            // 视频不支持 base64 格式插入
        },
        uploadImage: {
            server: VITE_URL + '/admin.FileUpload/wang_editor_upload',
            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
            fieldName: 'file',

            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 1 * 1024 * 1024, // 1M

            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,

            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
                token: token,
                otherKey: ''
            },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            // headers: {
            //     Accept: 'text/x-json',
            //     otherKey: 'xxx'
            // },

            // 跨域是否传递 cookie ，默认为 false
            // withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
        }

    }
}
</script>